<template>
  <a-table
    :columns="columns"
    :data="data"
    column-resizable
    :scroll="{ x: 1500, y: 600}"
    :scrollbar="true"
  />
</template>

<script>
import { reactive } from "vue";
import { onMounted } from "vue";
import axios from "axios";

export default {
  setup() {
    const columns = [
      {
        title: "端口",
        dataIndex: "port",
        width: 80,
      },
      {
        title: "协议",
        dataIndex: "protocol",
        width: 90,
      },
      {
        title: "方向",
        dataIndex: "direction",
      },
      {
        title: "策略",
        dataIndex: "strategy",
      },
      {
        title: "名称",
        dataIndex: "name",
      },
      {
        title: "操作",
        dataIndex: "action",
        slots: { customRender: "action" },
      },
    ];
    const data = reactive([]);

    function get_status() {
      axios
        .get("/api/get/port_rules")
        .then((response) => {
          data.vaule = [];
          if (response.data.code == 200) {
            if (response.data.type == "win") {
              //中文类型字段
              response.data.data.forEach((i) => {
                let protocol = "";
                let port = "";
                if (i.协议 == "任何") {
                  protocol = "TCP/UDP";
                } else {
                  protocol = i.协议;
                }
                if (i.本地端口 == "任何") {
                  port = "0-65535";
                } else if (i.本地端口 == "") {
                  port = "无";
                } else {
                  port = i.本地端口;
                }
                data.push({
                  port: port,
                  protocol: protocol,
                  direction: i.方向,
                  strategy: i.操作,
                  name: i.规则名称,
                  action: isNaN.action,
                });
              });
            } else {
              //英文类型字段
              console.log(response.data.data);
            }
          }
          console.log(response.data);
        })
        .catch((error) => {
          console.log(error);
        });
    }
    onMounted(() => {
      get_status();
    });
    return {
      columns,
      data,
      get_status,
    };
  },
};
</script>
<style>
.arco-form {
  background-color: var(--color-menu-light-bg);
  /*内边距*/
  padding: 10px;
}
</style>
